<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #canvas,
            #video {
                float: left;
                margin-right: 10px;
                background: #fff;
            }
            
            .box {
                overflow: hidden;
                margin-bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <video id="video" width="400" height="400"></video>
            <canvas id="canvas"></canvas>
        </div>
        <button id="live">直播</button>
        <button id="snap">截图</button>
        <script>
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var width = video.width;
            var height = video.height;
            canvas.width = width;
            canvas.height = height;
            function liveVideo() {
                var URL = window.URL || window.webkitURL; // 获取到window.URL对象
                navigator.getUserMedia({
                    video: true
                }, function(stream) {
                    video.src = URL.createObjectURL(stream); // 将获取到的视频流对象转换为地址
                    video.play(); // 播放
                    //点击截图     
                    document.getElementById("snap").addEventListener('click', function() {
                        ctx.drawImage(video, 0, 0, width, height);
                        var url = canvas.toDataURL('image/png');
                        document.getElementById('download').href = url;
                    });
                }, function(error) {
                    console.log(error.name || error);
                });
            }
            document.getElementById("live").addEventListener('click', function() {
                liveVideo();
            });
        </script>
    </body>

</html>